'use client';

import { queryPostDetails } from '@/services/api';
import { useQuery } from '@tanstack/react-query';
import type { IQueryPostDetails } from '@/interfaces';
import Alert from '@/app/[locale]/alert/alert';
import { useContext } from 'react';
import { PostAdminContext } from '@/contexts/admin/forum/post';
import AlertLoad from '@/app/[locale]/alert/load';
import QueryPostInfo from '@/app/[locale]/admin/forum/post/detail/info';
import QueryPostCount from '@/app/[locale]/admin/forum/post/detail/count';
import QueryPostTags from '@/app/[locale]/admin/forum/post/detail/tags';
import QueryPostTagGroup from '@/app/[locale]/admin/forum/post/detail/tagGroup';
import QueryPostCustomTag from '@/app/[locale]/admin/forum/post/detail/customTag';
import QueryPostBadge from '@/app/[locale]/admin/forum/post/detail/badge';
import QueryPostContent from '@/app/[locale]/admin/forum/post/detail/content';
import QueryPostReviewHistory from '@/app/[locale]/admin/forum/post/detail/reviewHistory';

export default function DetailsPostAdminPage() {
  const context = useContext(PostAdminContext);

  const queryPostDetailsQuery = useQuery(
    ['/forum', '/posts', context.detailItem?.id, '/details'],
    async (context) => {
      return (await queryPostDetails({
        id: context.queryKey[2] + '',
      })) as IQueryPostDetails;
    },
  );

  if (queryPostDetailsQuery.data) {
    const data = queryPostDetailsQuery.data;

    return (
      <div className="row">
        <div className="col">
          <div className="vstack gap-4">
            <QueryPostInfo details={data} />

            <QueryPostReviewHistory details={data} />

            <QueryPostCount details={data} />

            <div className="row">
              <div className="col">
                <QueryPostTags details={data} />
              </div>
              <div className="col">
                <QueryPostTagGroup details={data} />
              </div>
              <div className="col">
                <QueryPostCustomTag details={data} />
              </div>
              <div className="col">
                <QueryPostBadge details={data} />
              </div>
            </div>

            <QueryPostContent details={data} />

            <div></div>
          </div>
        </div>
      </div>
    );
  }

  if (queryPostDetailsQuery.error) {
    return <Alert type="error" message={queryPostDetailsQuery.error} />;
  }

  return <AlertLoad />;
}
